<template>
  <view class="tips-box">
    <view class="tips-date">
      <view class="tips-time">{{ tripData.travelDate }}</view>
      <view class="tips-weather"
        >{{ tripData.destName }}: {{ tripData.weatherMsg }}</view
      >
    </view>
    <view v-if="tripData.freeJourney" class="freeJourney">
      {{ tripData.freeContent }}
    </view>
    <block v-else>
      <view class="intro" v-if="tripData.daySummary">
        <text class="omit3">{{ tripData.daySummary }}</text>
      </view>
      <block>
        <view class="travel-content" v-if="tripData.poiNameDisplay">
          <view class="content">🏃{{ tripData.poiNameDisplay }}</view>
        </view>
      </block>
      <block v-for="(item, index) in tripData.productList" :key="index">
        <view class="travel-content">
          <view class="product-box">
            <img
              class="product-img"
              :src="item.stdMainPictureUrl"
              mode="aspectFill"
            />
            <view class="product-info">
              <view class="info-name single-line-text">{{ item.stdName }}</view>
              <view class="info-time single-line-text">{{ item.travelDate }}</view>
              <view class="info-address">
                <img
                  class="icon"
                  src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                  mode="aspectFill"
                />
                <view style="flex: 1" class="single-line-text">{{
                  item.address
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </block>
    <view class="detail-button" @click="examine"
      :data-spmCntSuffix="'.detailBtn.examine@'"
      :data-custom="1"
      :data-spm="{'pos': '查看详情'}">
      <text>查看详情</text
      ><uni-icons type="forward" color="#B5B5D2" size="14"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tripData: {
      type: Object,
    },
  },
  methods: {
    //查看行程
    examine() {
      let item = this.tripData;

      if (item.jumpAddressType == 1) {
        uni.setStorageSync(
          "experienceHome-dspId",
          {
            dspId: "",
            orderNo: item.orderId,
            tag: {},
          },
          3000
        );
        let orderNo = item.orderId;
        console.log(item.jumpAddressType);
        this.$navTo(
          "/packageA/pages/newExperienceHome/DspHome",
          { orderNo, tabIndex: 1 },
          "navigateTo"
        );
      }
      if (item.jumpAddressType == 2) {
        uni.navigateTo({
          url: '/ai/pages/aiDSPDetail/aiDSPDetail?dspId=' + item.itineraryId + '&isBack=1'
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tips-box {
  width: 502rpx;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 26rpx;
  margin: 20rpx auto 0 auto;
  padding: 0 0 24rpx 0;
  .tips-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    .tips-time {
      color: $sl-color-dark-grey;
      font-size: 24rpx;
      font-weight: 600;
    }
    .tips-weather {
      color: #b5b5d2;
      font-size: 24rpx;
    }
  }
  .intro {
    width: 454rpx;
    background: #e5ebff;
    border-radius: 16rpx;
    font-size: 24rpx;
    color: $sl-color-grey;
    padding: 20rpx;
    margin: 0 auto;
  }
  .travel-content {
    display: flex;
    justify-content: center;
    padding: 10rpx;
    border-radius: 16rpx;
    background: #ffffff;
    margin: 12rpx auto 0 auto;
    width: 454rpx;
    .content-time {
      color: #6b7489;
      font-size: 24rpx;
      width: 68rpx;
    }
    .content {
      color: $sl-color-dark-grey;
      font-size: 28rpx;
      font-weight: 600;
      flex: 1;
      line-height: 50rpx;
    }
    .product-box {
      display: flex;
      justify-content: flex-start;
      flex: 1;
      .product-img {
        width: 114rpx;
        height: 114rpx;
        border-radius: 10rpx;
        margin-right: 16rpx;
      }
      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .info-name {
          color: #4d566a;
          font-size: 28rpx;
          font-weight: bold;
        }
        .info-time {
          color: #6b7489;
          font-size: 24rpx;
        }
        .info-address {
          color: #6b7489;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          .icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
  .detail-button {
    width: 502rpx;
    height: 24rpx;
    text-align: center;
    line-height: 24rpx;
    margin: 24rpx auto 0 auto;
    text {
      color: $sl-color-light-grey;
      font-size: 24rpx;
      padding-right: 4rpx;
    }
  }
}
.freeJourney {
  width: 454rpx;
  height: 148rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: $sl-color-grey;
}
</style>
